<template>
<div>
   <ISearch @resetSubmitFun="resetSubmitFun" @searchSubmitFun="searchSubmitFun" :searchOptions="searchOptions">
       <template  #cus_template="{ obj }">
            <div class='cus_template'>
                <a-input  v-model:value="searchOptions.form[obj.field]" :placeholder="obj.label"  class="i-form-item"/>
                <a-button type="primary">关联数据</a-button>
            </div>
        </template>
   </ISearch>
</div>
</template>

<script lang="ts">
import { defineComponent, reactive, ref } from 'vue'
import { ISearch } from 'wd-platform-library'
import { SearchInterFace } from 'wd-platform-library/lib/src/ISearch/src/ISearchInterFace'
interface searchParamInterface{
    name: string,
    url: string,
    city: string|null;
    sex:string|null;
    cascaderList:null|string[];
    rangePicker: string|null,
    datePicker: string|null,
    treeSelectList:Array<any>;
    selectCheckBox:Array<any>;
    templateField:string;
}

export default defineComponent({
    name: 'i_from_demo',
    setup () {
        const dataList = [
            {
                id: 10891065345474561,
                menuName: '权限管理',
                children: [
                    {
                        id: 10948510534696991,
                        menuName: '角色管理'
                    },
                    {
                        id: 10948510534697001,
                        menuName: '菜单管理'
                    },
                    {
                        id: 10948510534697011,
                        menuName: '用户管理'
                    },
                    {
                        id: 10948510534697021,
                        menuName: '资源管理'
                    },
                    {
                        id: 10948510534697031,
                        menuName: '资源组管理'
                    }
                ]
            },
            {
                id: 10948510534696971,
                menuName: '系统管理',
                children: [
                    {
                        id: 10948510534697041,
                        menuName: '应用管理'
                    },
                    {
                        id: 1094851053469705,
                        menuName: '机构管理'
                    }
                ]
            }
        ]
        const searchOptions:SearchInterFace<searchParamInterface> = reactive({
            form: {
                name: '',
                url: '',
                city: null,
                sex: null,
                rangePicker: null,
                datePicker: null,
                cascaderList: null,
                treeSelectList: [],
                selectCheckBox: [],
                templateField: ''
            },
            fieldDataList: [
                {
                    labelWidth: 70,
                    type: 'input', // form表单类型
                    label: '姓名', // 字段描述信息
                    field: 'name' // form 对应字段
                },
                {
                    labelWidth: 70,
                    type: 'input', // form表单类型
                    label: '地址', // 字段描述信息
                    field: 'url' // form 对应字段
                },
                {
                    labelWidth: 70,
                    type: 'rangePicker', // form表单类型
                    label: '时间', // 字段描述信息
                    field: 'rangePicker' // form 对应字段
                },
                {
                    labelWidth: 70,
                    type: 'datePicker', // form表单类型
                    label: '时间', // 字段描述信息
                    field: 'datePicker' // form 对应字段
                },
                {
                    labelWidth: 90,
                    type: 'cascader', // form表单类型
                    label: '级联选择框', // 字段描述信息
                    field: 'cascaderList', // form 对应字段
                    options: {
                        fieldNames: { label: 'menuName', value: 'id', children: 'children' }
                    },
                    callback: (data: any) => {
                        alert(data)
                    },
                    dataList: dataList
                },
                {
                    labelWidth: 90,
                    type: 'treeSelect', // form表单类型
                    label: '树形选择框', // 字段描述信息
                    field: 'treeSelectList', // form 对应字段
                    options: {
                        maxTagCount: 1,
                        replaceFields: { title: 'menuName', value: 'id', children: 'children' },
                        treeNodeFilterProp: 'menuName'
                    },
                    callback: (data: any) => {
                        alert(data)
                    },
                    dataList: dataList
                },
                {
                    labelWidth: 90,
                    type: 'checkBoxSelect', // form表单类型
                    label: '下拉复选', // 字段描述信息
                    field: 'selectCheckBox', // form 对应字段
                    options: {
                        maxTagCount: 1,
                        replaceFields: { title: 'menuName', value: 'id', children: 'children' },
                        treeNodeFilterProp: 'menuName'
                    },
                    callback: (data: any) => {
                        alert(data)
                    },
                    dataList: dataList.map(item => {
                        return {
                            menuName: item.menuName,
                            id: item.id
                        }
                    })
                },
                {
                    labelWidth: 70,
                    type: 'radio', // form表单类型
                    label: '性别', // 字段描述信息
                    field: 'sex', // form 对应字段
                    dataList: [
                        {
                            label: '男',
                            value: 'nan'
                        },
                        {
                            label: '女',
                            value: 'nv'
                        }
                    ],
                    callback: (data: any, fieldDataItem:any) => {
                        alert('我选择了城市' + data)
                    }
                },
                {
                    labelWidth: 70,
                    type: 'select', // form表单类型
                    label: '城市', // 字段描述信息
                    field: 'city', // form 对应字段
                    dataList: [
                        {
                            label: '北京',
                            value: 'bj'
                        },
                        {
                            label: '河南',
                            value: 'hn'
                        },
                        {
                            label: '河北',
                            value: 'hb'
                        }
                    ],
                    callback: (data: any, fieldDataItem:any) => {
                        alert('我选择了城市' + data + ' \n返回当前对象:' + JSON.stringify(fieldDataItem))
                    }
                },
                {
                    labelWidth: 70,
                    type: 'template', // form表单类型
                    label: '自定义展示', // 字段描述信息
                    field: 'templateField', // form 对应字段
                    template: 'cus_template'
                }
            ]
        })
        const searchSubmitFun = () => {
            alert(JSON.stringify(searchOptions.form))
        }
        const resetSubmitFun = () => {
            searchOptions.form = {
                name: '',
                url: '',
                city: null,
                sex: null,
                rangePicker: null,
                datePicker: null,
                cascaderList: null,
                treeSelectList: [],
                selectCheckBox: [],
                templateField: ''
            }
            alert(JSON.stringify(searchOptions.form))
        }
        return {
            searchOptions,
            searchSubmitFun,
            resetSubmitFun
        }
    },
    components: {
        ISearch
    }
})
</script>

<style lang="scss" scoped>
.cus_template{
    display: flex;
}
</style>
